/*
 * Copyright (C) 2015 Actor LLC. <https://actor.im>
 */

.avatar {
  line-height: 0;

  position: relative;

  display: inline-block;
  overflow: hidden;

  box-sizing: border-box;
  width: $default-avatar-size;
  height: $default-avatar-size;
  padding: 1px;

  user-select: none;
  vertical-align: middle;

  border-radius: 100%;
  box-shadow: 0 0 1px rgba(0, 0, 0, .1);

  &__image {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border-radius: 100%;
  }
  &__placeholder {
    font-size: 15px;
    font-weight: 700;
    line-height: $default-avatar-size - 2px;

    display: block;
    box-shadow: 0 0 1px rgba(0, 0, 0, .1);

    width: $default-avatar-size - 2px;
    height: $default-avatar-size - 2px;

    cursor: default;
    text-align: center;
    text-transform: uppercase;

    color: rgb(255, 255, 255);
    border-radius: 100%;
    text-shadow: 0 -1px 5px rgba(0, 0, 0, .17);

    // Placeholder colors
    &--empty {
      background-color: $color-empty;
    }
    &--lblue {
      background-color: $color-lblue;
    }
    &--blue {
      background-color: $color-blue;
    }
    &--purple {
      background-color: $color-purple;
    }
    &--red {
      background-color: $color-red;
    }
    &--orange {
      background-color: $color-orange;
    }
    &--yellow {
      background-color: $color-yellow;
    }
    &--green {
      background-color: $color-green;
    }
  }

  &--tiny {
    width: $avatar-tiny-size;
    height: $avatar-tiny-size;
    .avatar__placeholder {
      font-size: 12px;
      font-weight: 700;
      line-height: $avatar-tiny-size - 2px;

      width: $avatar-tiny-size - 2px;
      height: $avatar-tiny-size - 2px;
    }
  }
  &--small {
    width: $avatar-small-size;
    height: $avatar-small-size;
    .avatar__placeholder {
      font-size: 14px;
      line-height: $avatar-small-size - 2px;

      width: $avatar-small-size - 2px;
      height: $avatar-small-size - 2px;
    }
  }
  &--medium {
    width: $avatar-medium-size;
    height: $avatar-medium-size;
    .avatar__placeholder {
      font-size: 16px;
      line-height: $avatar-medium-size - 2px;

      width: $avatar-medium-size - 2px;
      height: $avatar-medium-size - 2px;
    }
  }
  &--large {
    width: $avatar-large-size;
    height: $avatar-large-size;
    .avatar__placeholder {
      font-size: 20px;
      line-height: $avatar-large-size - 2px;

      width: $avatar-large-size - 2px;
      height: $avatar-large-size - 2px;
    }
  }
  &--big {
    width: $avatar-big-size;
    height: $avatar-big-size;
    .avatar__placeholder {
      font-size: 32px;
      line-height: $avatar-big-size - 2px;

      width: $avatar-big-size - 2px;
      height: $avatar-big-size - 2px;
    }
  }
  &--huge {
    width: $avatar-huge-size;
    height: $avatar-huge-size;
    .avatar__placeholder {
      font-size: 64px;
      line-height: $avatar-huge-size - 2px;

      width: $avatar-huge-size - 2px;
      height: $avatar-huge-size - 2px;
    }
  }
}
